<template>
    <div class="grid-container">
        <div class="item item1">第一行 - 列 1</div>
        <div class="item item2">第一行 - 列 2</div>
        <div class="item item3">第二行 - 列 1</div>
        <div class="item item4">第二行 - 列 2</div>
        <div class="item item5">第三行 - 列 1</div>
        <div class="item item6">第三行 - 列 2</div>
    </div>
</template>

<style lang="scss" scoped>
.grid-container {
    display: grid;
    grid-template-rows: auto auto auto; /* 三行 */
    grid-template-columns: repeat(2, 1fr); /* 第一行的两列宽度相等 */
    gap: 10px; /* 行列间距 */
}

/* 第一行样式 */
.item1 {
    grid-column: 1; /* 第一行 - 列 1 */
}

.item2 {
    grid-column: 2; /* 第一行 - 列 2 */
}

/* 第二行样式 */
.item3 {
    grid-column: 1; /* 第二行 - 列 1 */
}

.item4 {
    grid-column: 2; /* 第二行 - 列 2 */
}

/* 第三行样式 */
.item5 {
    grid-column: 1; /* 第三行 - 列 1 */
}

.item6 {
    grid-column: 2; /* 第三行 - 列 2 */
}

/* 修改第二行和第三行的列宽 */
.grid-container {
    // grid-template-columns: 1fr 200px; /* 适应第一列宽度，第二列固定200px */
}

/* 只在第二行和第三行应用列设置 */
.item3,
.item4,
.item5,
.item6 {
    grid-column: span 1; /* 确保每列适应其内容 */
}

/* 为第二行和第三行的第二列设置固定宽度 */
.item4,
.item6 {
    width: 200px; /* 固定宽度 */
}
.item {
    border: 1px solid #000;
}
</style>
